<template>
    <el-row>
        <el-col :span="8" :offset="8">
            <el-card shadow="never">
                <el-row style="margin-left:  -20px;margin-right:  -20px;margin-top:  -20px;">
                    <el-col :span="10" style="color: #5195f1;margin-top: 30px;border-left: 3px solid #5195f1;padding-left: 30px;margin-bottom: 36px;height: 30px;line-height: 30px;font-size: 24px;">重置密码</el-col>
                </el-row>
                <el-form :model="password">
                    <el-form-item label="手机号">
                        <el-input type="text" v-model="password.phone" :maxlength="11" suffix-icon="el-icon-mobile-phone" placeholder="请输入手机号" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="短信验证码">
                        <el-input type="text" v-model="password.phoneCode" placeholder="请输入短信验证码" auto-complete="off">
                            <span slot="suffix" @click="getPhoneCaptcha">{{password.captchaTxt}}</span>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="新密码">
                        <el-input type="password" v-model="password.password" placeholder="请输入新密码" suffix-icon="el-icon-message" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码">
                        <el-input type="text" v-model="password.captcha" placeholder="请输入验证码" auto-complete="off">
                            <i class="captchaImagelogin" slot="suffix" v-html="password.captchaSvg" @click="getCaptcha"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" style="width: 100%" @click="forgetPwd">重置密码</el-button>
                    </el-form-item>
                </el-form>
                <el-row style="color:#515151">
                    <el-col :span="10" :offset="14" style="text-align: right">
                        <span @click="goLogin" style="cursor: pointer;">已有账号，去登录</span>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
export default {
    layout: "public",
    data() {
        return {
            password: {
                phone: "",
                password: "",
                passwordType: "password",
                phoneCode: "",
                phoneCodeUuid: "",
                captchaTxt: "发送验证码",
                captcha: "",
                captchaUuid: "",
                captchaSvg: ""
            }
        };
    },
    async asyncData({ app }) {
        const captcha = await app.$axios.$get("/api/app/home/public/captcha");
        return {
            password: {
                captchaSvg: captcha.data.svg,
                captchaUuid: captcha.data.uuid,
                captchaTxt: "发送验证码"
            }
        };
    },
    methods: {
        async goLogin() {
            this.$router.push("/public/login");
        },
        async getPhoneCaptcha() {
            if (!this.password.phone) {
                this.$message.error("请输手机号");
                return;
            }
            if (this.password.phone.length !== 11) {
                this.$message.error("手机号输入有误");
                return;
            }

            if (typeof this.password.captchaTxt === "number") {
                return;
            }
            let i = 1;
            this.password.captchaTxt = 60;
            let captcha_interval = setInterval(() => {
                this.password.captchaTxt -= i;
                if (this.password.captchaTxt === 0) {
                    clearInterval(captcha_interval);
                    this.password.captchaTxt = "发送验证码";
                }
            }, 1000);

            const code = await this.$axios.$post(
                "/api/app/home/public/sendSmsCode",
                {
                    phone: this.password.phone
                }
            );
            if (code && code.errmsg === "ok") {
                this.password.phoneCodeUuid = code.data.uuid;
            } else {
                clearInterval(captcha_interval);
                this.password.captchaTxt = "发送验证码";
            }
        },

        async getCaptcha() {
            const captcha = await this.$axios.$get(
                "/api/app/home/public/captcha"
            );

            this.password.captchaSvg = captcha.data.svg;
            this.password.captchaUuid = captcha.data.uuid;
        },

        switchPwdType() {
            if (this.password.passwordType === "text") {
                this.password.passwordType = "password";
            } else {
                this.password.passwordType = "text";
            }
        },

        async forgetPwd() {
            if (!this.password.phone) {
                this.$message.error("请输手机号");
                return;
            }
            if (this.password.phone.length !== 11) {
                this.$message.error("手机号输入有误");
                return;
            }

            if (!this.password.password) {
                this.$message.error("请输入新密码");
                return;
            }
            if (!this.password.phoneCode) {
                this.$message.error("请输入短信验证码");
                return;
            }
            if (!this.password.captcha) {
                this.$message.error("请输入验证码");
                return;
            }

            const password = await this.$axios.$post(
                "/api/app/home/public/resetPwd",
                {
                    phone: this.password.phone,
                    password: this.password.password,
                    phoneCode: this.password.phoneCode,
                    phoneCodeUuid: this.password.phoneCodeUuid,
                    captcha: this.password.captcha,
                    captchaUuid: this.password.captchaUuid
                }
            );
            if (password && password.errmsg === "ok") {
                this.$message.success("重置成功");
                this.$router.push("/public/login");
            }
        }
    }
};
</script>
<style>
</style>
